const path = require('path');
// entry 入口文件,告诉资源从哪里开始  默认./src/index.js
// output 出口文件,打包好的文件资源输出到哪里    默认./dist/main.js
// loader webpack 只能识别js/json 处理其他类型的文件，就需要使用 loader 进行转换。 翻译官
// loader 执行的顺序,从右到左,从下到上
// plugins 插件,执行更广泛的任务,打包,优化,压缩
// mode  模式 development 开发, production 生产模型,压缩,优化,兼容

// output 是一个对象 
// filename 指定解析的文件的名字,默认是main.js
module.exports = {
  entry: "./src/myindex.js",
  output: {
    filename: 'bundle.js',
    // 指定生成文件路径
    path: path.resolve(__dirname, 'chunk'),
    clean: true, // 在生成文件之前清空 output 目录
  },
  // 组件,模块
  module: {
    // ,不同的文件需要 配合不同的loader配合使用
    rules: [
      // 正则表达式, 使用的加载器,翻译官
      {
        test: /\.css$/,
        use: [
          // 创建style 然后放到html中head 中
          'style-loader',
          // 将css 文件 当做模块加载到js 中,这时候还是字符串
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|png|jpeg)$/,
        // 将图片直接放到路径里边
        loader: 'url-loader',
        options: {
          // 16kb一下
          // limit: 8 * 1024,
          esModule: false,
          name: '[name].[hash:9].[ext]'
        },
        type: 'javascript/auto'
      },

    ],
  },
  mode: 'development'
  // mode:'production'
};